import React, { Component } from 'react';
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';

import JSONTree from './JSONTree';
const FormItem = Form.Item;

const theme = {
  scheme: 'monokai',
  author: 'wimer hazenberg (http://www.monokai.nl)',
  base00: '#272822',
  base01: '#383830',
  base02: '#49483e',
  base03: '#75715e',
  base04: '#a59f85',
  base05: '#f8f8f2',
  base06: '#f5f4f1',
  base07: '#f9f8f5',
  base08: '#f92672',
  base09: '#fd971f',
  base0A: '#f4bf75',
  base0B: '#a6e22e',
  base0C: '#a1efe4',
  base0D: '#66d9ef',
  base0E: '#ae81ff',
  base0F: '#cc6633'
};

class DataJsonEditor extends Component {
  constructor(props){
    super(props);
    this.state={
      eidting:false
    }
    this._transJsonString=this.transJsonString.bind(this);
  }
  transJsonString(){
    console.log('transJsonString')
    this.setState({
      eidting:!this.state.eidting
    })

  }
  // TODO 在用户提交json数据时先检查json的数据格式
  checkJsonLint(){

  }
  render() {
     const { getFieldDecorator } = this.props.form;
    return (
      <div className="jsontree-wrap">
      
      {this.state.eidting?<div>
        
       <Form  >
        <FormItem>
          {getFieldDecorator('userName', {
            initialValue:this.props.jsonString.preview,
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
             <Input type="textarea" autosize={{ minRows: 5, maxRows: 20 }} />
         
          )}
        </FormItem>
        
        <FormItem>
          <Button type="primary" htmlType="submit">提交修改</Button>
        </FormItem>
      </Form>
      </div>:(
          <div>
            <div className="jsontree-editor_btn" onClick={this._transJsonString}  ><Button > 点击编辑</Button></div>
            <JSONTree
              data={JSON.parse(this.props.jsonString.preview)}
              theme={theme}
              invertTheme={false}
            />
          </div>
      )}
    
    </div>
    )
  }

}
DataJsonEditor = Form.create()(DataJsonEditor)
export default DataJsonEditor;
